<template>
    <div>
        <h1>修改</h1>
        <table class="table">
            <tbody>
                <tr>
                    <td>编号</td>
                    <td>{{data.Id}}</td>
                </tr>
                <tr>
                    <td>名称</td>
                    <td><input type="text" v-model="data.Name"></td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td>
                        <input type="radio" name="Sex" value="男" v-model="data.Sex">男
                        <input type="radio" name="Sex" value="女" v-model="data.Sex">女
                    </td>
                </tr>
                <tr>
                    <td>年龄</td>
                    <td><input type="text" v-model="data.Age"></td>
                </tr>
                <tr>
                    <td>图片</td>
                    <td>
                        <input type="file" @change="tu">
                        <img :src="'https://localhost:7248/'+data.Img" style="width: 100px;height: 100px;">
                    </td>
                </tr>
                <tr>
                    <td>状态</td>
                    <td>
                        <input type="radio" name="State" :value="true" v-model="data.State">启用
                        <input type="radio" name="State" :value="false" v-model="data.State">禁用
                    </td>
                </tr>
                <tr>
                    <td>会员等级</td>
                    <td>
                        <select v-model="data.LeveId">
                            <option value="0">请选择</option>
                            <option v-for="a in bang" :value="a.LeveId">{{a.LName}}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="button" value="修改" @click="Upd"></td>
                </tr>
            </tbody>
        </table>


    </div>
</template>

<script setup lang="ts">
import { ref ,onMounted} from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
onMounted(()=>{
    Xia();
    Fan()
})
const bang=ref([{
    "LeveId": 0,
    "LName": ""
}])
const Xia=()=>{
    axios.get('https://localhost:7248/api/Member/Xia').then(res=>{
        bang.value = res.data;
    })
}


const data = ref({
    "Id": 0,
  "Name": "",
  "Sex": "",
  "CreateDate": "",
  "Age": 0,
  "Img": "",
  "State": true,
  "IsDeleted": true,
  "HoubbyCount": 0,
  "HoubbyString": "string",
  "LeveId": 0
})
const route = useRoute()


const Fan=()=>{
    var e = route.query.Id
    axios.get('https://localhost:7248/api/Member/Fan',{params:{Id:e}}).then(res=>{
        data.value = res.data;
    })
}
const router = useRouter()
const Upd=()=>{
    axios.post("https://localhost:7248/api/Member/Upd",data.value).then(res=>{
        if(res.data>0){
            alert('修改成功');
            router.push({path:"/Show"})
        }
        else{
            alert('修改失败')
        }
    })
}
//图片上传
const tu = (e:any)=>{
    var f = e.target.files[0];
    var fd = new FormData();
    fd.append("file",f);


    if(f.size>2*1024*1024){
        alert('图片不能超过2MB');
        return;
    }

    if(f.type!="image/jpeg"&&f.type!="image/png"){
        alert('图片只能是jpg和png格式')
        return;
    }




    axios.post('https://localhost:7248/api/tu/Tup',fd).then(res=>{
        data.value.Img=res.data;
    })
}





</script>

<style scoped>

</style>